<template>
  <div>
    <el-row :gutter="20" style="background-color: white">
      <el-col :offset="0"> <a href="#">首页</a> / 智慧停车 / 停车管理 </el-col>
    </el-row>
    <hr />

    <el-row :gutter="20">
      <el-col :span="5" :offset="2" >
        <el-input  placeholder="请输入停车场编号" clearable v-model="parkinglotname" ></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-select v-model="cartype" placeholder="请选择停车场类型">
          <el-option label="地上停车场" value="地上停车场"
            >地上停车场</el-option
          >
          <el-option label="地下停车场" value="地下停车场"
            >地下停车场</el-option
          >
        </el-select>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input placeholder="请输入停车场ID" clearable v-model="parkinglotid"></el-input>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button type="primary" icon="el-icon-search" @click="findbyParam()">搜索</el-button>
      </el-col>
    </el-row>
    <hr />

    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
        <el-button type="success"  @click="find()">显示全部</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="pagination.records"
      style="width: 100%"
      :default-sort="{ prop: 'parkinglot_id', order: 'descending' }"
    >
      <el-table-column prop="parkinglotId" label="停车场ID" width="180">
      </el-table-column>
      <el-table-column prop="buildingId" label="停车场编号" width="180">
      </el-table-column>
      <el-table-column prop="parkinglotType" label="停车场类型">
      </el-table-column>
      <el-table-column prop="parkinglotDate" label="创建时间">
      </el-table-column>
      <el-table-column label="操作"
        ><template slot-scope="scope">
          <el-button
            type="warning"
            @click="updateUI(scope.row)"
            plain 
            >修改</el-button
          >
          <el-button type="danger" @click="deleteParkinglot(scope.row)" plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>

    <!-- 添加停车场页面的弹出框 -->
    <el-dialog title="添加停车场信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="绑定楼栋" :label-width="formLabelWidth">
          <el-select
            v-model="parkinglot.buiBuildingId"
            placeholder="必填，请选择附属楼栋"
            style="margin-right: 400px"
          >
            <el-option
              v-for="building in buildings"
              :key="building.buildingId"
              :value="building.buildingId"
              >{{ building.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="停车场编号" :label-width="formLabelWidth">
          <el-input
            v-model="parkinglot.buildingId"
            placeholder="必填，请填写停车场编号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="停车场类型" :label-width="formLabelWidth">
          <el-select
            v-model="parkinglot.parkinglotType"
            placeholder="必填，请停车场类型"
            style="margin-right: 400px"
          >
            <el-option label="地上停车场" value="地上停车场"
              >地上停车场</el-option
            >
            <el-option label="地下停车场" value="地下停车场"
              >地下停车场</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="parkinglot.remarks"
            placeholder="可选，请填写备注信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearupdateparkinglot">取 消</el-button>
        <el-button type="primary" @click="addCarPark">保存</el-button>
      </div>
    </el-dialog>
    <!-- 保存时消息对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>该停车场编号已存在！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改停车场页面的弹出框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>
        <el-form-item label="绑定楼栋" :label-width="formLabelWidth">
          <el-select
            v-model="updateparkinglot.buiBuildingId"
            placeholder="必填，请选择附属楼栋"
            style="margin-right: 400px"
          >
            <el-option
              v-for="building in buildings"
              :key="building.buildingId"
              :value="building.buildingId"
              >{{ building.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="停车场编号" :label-width="formLabelWidth">
          <el-input
            v-model="updateparkinglot.buildingId"
            placeholder="必填，请填写停车场编号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="停车场类型" :label-width="formLabelWidth">
          <el-select
            v-model="updateparkinglot.parkinglotType"
            placeholder="必填，请停车场类型"
            style="margin-right: 400px"
          >
            <el-option label="地上停车场" value="地上停车场"
              >地上停车场</el-option
            >
            <el-option label="地下停车场" value="地下停车场"
              >地下停车场</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="updateparkinglot.remarks"
            placeholder="可选，请填写备注信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="updateKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: [],
      buildings: {},
      dialogFormVisible: false,
      dialogFormVisibleupdate: false,
      dialogVisible: false,
      updateparkinglot: {},
      parkinglotname:"",
      cartype: "",
      parkinglotid:"",


      parkinglot: {
        buiBuildingId: "",
        buildingId: "",
        parkinglotType: "",
        remarks: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    //查询所有加分页
    find(page = 1, pageSize = 5) {
      let url =
        "/leanyuan/t-parkinglot/selectPageParkinglot?page=" +
        page +
        "&pageSize=" +
        pageSize;
      this.$axios
        .get(url)
        .then((resp) => {
          console.log(resp.data);
          this.pagination = resp.data;
          this.parkinglotname="";
          this.parkinglotid="";
          this.cartype="";
        })
        .catch((ex) => {});
    },
    //每页显示的记录数发生改变，查询
    handleSizeChange(pageSize) {
      this.find(this.pagination.current, pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },

     //带条件查询加分页
    findbyParam(page = 1, pageSize = 5) {
      let number;
      if(this.parkinglotid==""){
        number=-1;
      }else{
        number=this.parkinglotid
      }
      let url ="/leanyuan/t-parkinglot/selectPageParkinglotByParam";
      let params=new  URLSearchParams();
           params.append("parkinglotname",this.parkinglotname);
           params.append("cartype",this.cartype);
           params.append("parkinglotid",number);
           params.append("page",page);
           params.append("pageSize",pageSize)
      this.$axios
        .post(url,params)
        .then((resp) => {
          console.log(resp.data);
          this.pagination = resp.data;
        })
        .catch((ex) => {});
    },

    //查询楼栋信息
    findBuildings() {
      let url = "/leanyuan/t-parkinglot/selectBuilDingAll";
      this.$axios
        .get(url)
        .then((resp) => {
          console.log(resp.data);
          this.buildings = resp.data;
        })
        .catch((ex) => {});
    },

    //添加停车场信息
    addCarPark() {
      let url = "/leanyuan/t-parkinglot/addParkingLot";
      this.$axios
        .post(url, this.parkinglot)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisible = false;
            this.dialogVisible = false;
            this.updateparkinglot = {};
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },
    //消息对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //推出添加页面时清空添加页面数据
    clearupdateparkinglot(){
      this.parkinglot = {};
      this.dialogFormVisible = false;
      this.dialogVisible = false;
    },
    //进入修改页面
    updateUI(row) {
      this.dialogFormVisibleupdate = true;
      this.updateparkinglot = row;
      console.log(row)
    },

    //保存修改的数据
    updateKeep(){
       let url = "/leanyuan/t-parkinglot/updateParkingLotById";
      this.$axios
        .post(url, this.updateparkinglot)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisibleupdate = false;
            this.dialogVisible = false;
            this.parkinglot = {};
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },

    //删除
    deleteParkinglot(row) {
      console.log(row.parkinglotId);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          //调用服务端的处理，然后再给出成功提示
          let url =
            "/leanyuan/t-parkinglot/deleteParkingLotById?id=" +
            row.parkinglotId;
          this.$axios
            .get(url)
            .then((resp) => {
              console.log(resp.data);
            })
            .catch((ex) => {});
          this.$message({
            type: "success",
            message: row.parkinglotId + ",删除成功!",
          });
          this.find();
        })
        .catch(() => {
          this.$alert("已经取消操作", "提示");
        });
    },
  },
  mounted() {
    this.find();
    this.findBuildings();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 24px;
}
.el-container {
  margin-top: -58px;
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
#div1 {
  height: 150px;
  width: 100px;
  background-color: red;
  margin-left: 210px;
}
</style>